<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @tap="backOnePage()">
				<image class="back" src="../../static/images/common/back.png" mode=""></image>
			</view>
			<view class="top-bar-center title">
				爸爸
			</view>
			<view class="top-bar-right">
				<view class="icon">
					<image src="../../static/images/img/yellowman.jpg" mode=""></image>	
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="chat" scroll-with-animation="true" :scroll-into-view="scrollToView">
			<view class="chat-main" :style="{'paddingBottom':bottom+'px'}">
				<view class="chat-ls" v-for="(item,index) in msgs" :key="index" :id="'msg'+item.tip">
					<view class="chat-time" v-if="item.time">
						{{changeTime(item.time)}}
					</view>
					<view class="msg-m msg-left" v-if="item.id != 'b'">
						<image class="user-img" :src="item.imgurl" mode=""></image>
						<view class="message">
							<view class="msg-text" v-if="item.types == 0">
								{{item.message}}
							</view>
							<image class="msg-img" v-if="item.types == 1" :src="item.message" @tap="previewImg(item.message)" mode="widthFix"></image>
							<view class="msg-text voice" v-if="item.types == 2" :style="{width:item.message.time*4+'px'}" @tap="playVoice(item.message.voice)">
								<image src="../../static/images/submit/yuyin.png" mode=""></image>
								{{item.message.time+'"'}}
							</view>
							<view class="msg-text" v-if="item.types == 3">
								{{item.message.name}}
							</view>
						</view>
					</view>
					<view class="msg-m msg-right" v-if="item.id == 'b'">
						<image class="user-img" :src="item.imgurl" mode=""></image>
						<view class="message">
							<!-- 文字 -->
							<view class="msg-text" v-if="item.types == 0">
								{{item.message}}
							</view>
							<!-- 图片 -->
							<image class="msg-img" v-if="item.types == 1" :src="item.message" @tap="previewImg(item.message)" mode="widthFix"></image>
							<!-- 音频 -->
							<view class="msg-text voice" v-if="item.types == 2" :style="{width:item.message.time*4+'px'}" @tap="playVoice(item.message.voice)">
								{{item.message.time+'"'}}
								<image src="../../static/images/submit/yuyin.png" mode=""></image>
							</view>
							<!-- 位置 -->
							<view class="msg-text" v-if="item.types == 3">
								{{item.message.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="box"></view> -->
			</view>
		</scroll-view>
		<submit @inputs="inputs" @heights='heights'></submit>
	</view>
</template>

<script>
	import datas from '../../commons/js/datas.js'
	import myfun from '../../commons/js/myfunction.js'
	import submit from '../../components/submit/submit.vue'
	
	//录音播放
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				msgs:[],
				imgArray:[],
				imgIndex:0,
				compareTime: '',
				scrollToView:'',
				bottom: 60,
			};
		},
		onLoad() {
			this.compareTime = new Date();
			this.getMsg();
		},
		components:{
			submit:submit,
		},
		methods:{
			//返回上一个页面
			backOnePage: function() {
				uni.navigateBack({
					detail: 1,
				})
			},
			// 处理时间
			changeTime: function(date){
				return myfun.dateTime(date);
			},
			//获取消息列表
			getMsg: function(){
				let msgs = datas.message();
				let lastTime = msgs[0].time;
				msgs.forEach((item,index)=>{
					item.imgurl = "../../static/images/img/"+item.imgurl;
					if(item.types == 1){
						item.message = "../../static/images/img/"+item.message;
						this.imgArray.unshift(item.message);
					}
					item.time = myfun.spaceTime(item.time,this.compareTime);
					if(item.time != ''){
						this.compareTime = item.time;
					}
					this.msgs.unshift(msgs[index]);
				});
				this.compareTime = lastTime;
				this.$nextTick(function(){
					this.scrollToView = 'msg'+this.msgs[this.msgs.length-1].tip;
					// console.log(this.scrollToView);
				});
			},
			//预览图片
			previewImg: function(e){
				this.imgArray.forEach((item,index)=>{
					if(item == e){
						this.imgIndex = index;
					} 
					else{
						return 0;
					} 
				});
				uni.previewImage({
					urls:this.imgArray,
					current:this.imgIndex,
					longPressAction: {
						itemList:['发送给朋友','保存到手机','收藏'],
						success: function(data){
							//处理函数
						},
						fail: function(err){
							console.log(err);
						}
					}
				})
			},
			//组件之间的信息传递
			inputs: function(e){
				let data = {
					id: "b",
					imgurl: "../../static/images/img/yellowman.jpg",
					message: e.message,
					types: e.types,
					time: new Date(),
					tip: this.msgs.length,
				};
				//判断是否为compareTime+时间间隔是否小于现在时间
				data.time = myfun.spaceTime(this.compareTime,new Date());
				if(data.time != ''){
					this.compareTime = data.time;
				}
				// console.log(getDate(this.compareTime));
				// console.log(data.time);
				this.msgs.push(data);
				console.log(this.msgs)
				if(data.types == 1){
					this.imgArray.push(data.message)
				};
				this.$nextTick(function(){
					this.scrollToView = 'msg'+data.tip
				})
			},
			heights: function(e){
				this.bottom = e;
				this.scrollToBottom();
			},
			//页面滚动到最低端
			scrollToBottom: function(){
				this.scrollToView = '';
				this.$nextTick(()=>{
					this.scrollToView = 'msg'+this.msgs[this.msgs.length-1].tip;
					// console.log(this.bottom);
				});
			},
			//播放录音
			playVoice: function(e){
				// innerAudioContext.autoplay = true;
				innerAudioContext.src = e;
				innerAudioContext.Play();
			}
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		width: 100%;
		background-color: rgba(244, 244, 244, 0.96);
	}
	.top-bar{
		background-color: rgba(244, 244, 244, 0.96);
		border-bottom: 1px solid $uni-border-color;
	}
	.top-bar-right{
			.icon{
				padding: 10rpx 32rpx;
				image{
					padding: 0;
					width: 68rpx;
					height: 68rpx;
					border-radius: 16rpx;
				}
			}
	}
	.chat{
		height: 100%;
		padding-top: 88rpx;
		.chat-main{
			padding: 0 $uni-spacing-col-base;
			display: flex;
			flex-direction: column;
			.box{
				padding-top: var(--status-bar-height);
			}
		}
		.chat-ls{
			.chat-time{
				font-size: $uni-font-size-sm;
				color: rgba(39,40,50,0.3);
				line-height: 34rpx;
				padding: 20rpx 0;
				text-align: center;
			}
			.msg-m{
				display: flex;
				padding: 20rpx 0;
				.user-img{
					width: 80rpx;
					height: 80rpx;
					border-radius: $uni-border-radius-base;
				}
				.message{
					max-width: 70%;
					.msg-text{
						font-size: $uni-font-size-lg;
						font-weight: 400;
						color: $uni-text-color;
						line-height: 44rpx;
						padding: 18rpx 24rpx;
					}
					.msg-img{
						max-width: 400rpx;
						border-radius: $uni-border-radius-base;
					}
					.voice{
						min-width: 100rpx;
						max-width: 400rpx;
						display: flex;
						justify-content: space-between;
						image{
							width: 52rpx;
							height: 52rpx;
						}
					}
				}
			}
			.msg-left{
				flex-direction: row;
				.msg-text{
					margin-left: 16rpx;
					background-color: #fff;
					border-radius: 0 20rpx 20rpx 20rpx;
				}
				.msg-img{
					margin-left: 16rpx;
				}
			}
			.msg-right{
				flex-direction: row-reverse;
				.msg-text{
					margin-right: 16rpx;
					background-color: rgba($uni-color-primary, 0.8);
					border-radius: 20rpx 0 20rpx 20rpx;
				}
				.msg-img{
					margin-right: 16rpx;
				}
			}
		}
	}

</style>
